<div class="control-panel">
  <input id="ondemand" type="checkbox" [(ngModel)]="renderOnDemand" />
  <label for="ondemand">Render On-Demand</label>
  <select class="form-control" [(ngModel)]="controlType">
    <option class="works-on-demand">orbit</option>
    <option class="works-on-demand">map</option>
    <option class="works-on-demand">arcball</option>
    <option class="works-on-demand">transform</option>
    <option class="works-on-demand">drag</option>
    <option class="needs-loop">fly</option>
    <option class="needs-loop">trackball</option>
    <option class="needs-loop">firstpersion</option>
  </select>
</div>

<th-canvas [thStats]="true" [renderOnDemand]="renderOnDemand" #canvas>
  <th-scene>
    <th-ambientLight [intensity]="3" />

    <th-object3D
      #model
      loadGLTF
      [url]="glbPath"
      (onClick)="selected = !selected"
      [scale]="selected ? [2, 2, 2] : [1, 1, 1]"
    />
    <th-gridHelper [args]="[10, 10]" />
    <th-pointLight [position]="[10, 10, 10]" [decay]="0" />

    <th-perspectiveCamera #camera [args]="[45, 2, 0.1, 100]" [position]="[10, 10, 10]" [lookAt]="[0, 0, 0]">
      @switch (controlType) { @case ('orbit') {
      <th-orbitControls />
      } @case ('map') {
      <th-mapControls />
      } @case ('arcball') {
      <th-arcballControls />
      } @case ('transform') {
      <th-transformControls [object]="model.objRef" />
      } @case ('drag') {
      <th-dragControls [args]="[[model.objRef], camera.objRef, canvas.hostElement.nativeElement]" />
      } @case ('fly') {
      <th-flyControls />
      } @case ('trackball') {
      <th-trackballControls />
      } @case ('firstpersion') {
      <th-firstPersonControls />
      } }
    </th-perspectiveCamera>
  </th-scene>
</th-canvas>
